<template>
    <div id="order-info">
        <el-container>
            <el-header id="infoHeader">
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForms">
                    <el-col class="item-header" :span="22">
                        <el-form-item class="visit-item header-item1" label="NO." prop="orderNumber">
                            <el-input :disabled="ruleForm.active" v-model="ruleForm.orderNumber"></el-input>
                        </el-form-item>
                        <el-form-item class="visit-item header-item2" label="订单状态 :">
                            <el-select v-model="ruleForm.orderState" 
                            :disabled="ruleForm.active"  
                            style='height:20px;' 
                            class='btns' placeholder="请选择活动区域">
                                <el-option label="未完成" :value="1"></el-option>
                                <el-option label="已完成" :value="2"></el-option>
                                <el-option label="异常订单" :value="3"></el-option>
                                <el-option label="退款中" :value="4"></el-option>
                                <el-option label="退款完成" :value="5"></el-option>
                                <el-option label="取消订单" :value="6"></el-option>
                                <el-option label="退款驳回" :value="7"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="visit-item header-item3" label="手机:" prop="orderPhone">
                            <el-input :disabled="ruleForm.active" v-model="ruleForm.orderPhone"></el-input>
                        </el-form-item>
                        <el-col class="header-btn" :span="5">
                            <div class="infoLine1Right">
                                <span class="editInfo" @click="editInfo($event)">编辑</span>
                                <span class="line1CloseBtn el-icon-close" @click="closeInfo"></span>
                            </div>
                        </el-col>
                    </el-col>
                    <el-col class="item-body" :span="24">
                        <el-col :span="4">
                        <el-form-item class="visit-item " label="下单时间" prop="orderTime">
                            <el-input :disabled='ruleForm.active' v-model="ruleForm.orderTime"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="2">
                        <el-form-item class="visit-item" label="订单金额" prop="orderMoney">
                            <el-input :disabled='ruleForm.active' v-model="ruleForm.orderMoney"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="2">
                        <el-form-item class="visit-item" label="支付金额" prop="paidMoney">
                            <el-input :disabled='ruleForm.active' v-model="ruleForm.paidMoney"></el-input>
                        </el-form-item>
                        </el-col>
                         <el-col :span="2">
                        <el-form-item class="visit-item" label="未付款金额" prop="unpaidMoney">
                            <el-input :disabled='ruleForm.active' v-model="ruleForm.unpaidMoney"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="2">
                        <el-form-item class="visit-item" label="退款金额" prop="returnMoney">
                            <el-input :disabled="ruleForm.active" v-model="ruleForm.returnMoney"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="2">
                        <el-form-item class="visit-item" label="业主姓名" prop="orderpeople">
                            <el-input :disabled='ruleForm.active' v-model="ruleForm.orderpeople"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="6">
                        <el-form-item class="visit-item" label="地址" prop="orderAddress">
                            <el-input :disabled="ruleForm.active" v-model="ruleForm.orderAddress"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="3">
                        <el-form-item class="visit-item" label="会员手机号" prop="level">
                            <el-input readonly='readonly' v-model="ruleForm.level"></el-input>
                        </el-form-item>
                        </el-col>
                    </el-col>
                </el-form>
            </el-header>
            <el-container id="infoContainer">
                <el-aside id="conLeft">
                    <div class="conLeftTitle"> <span>相关</span></div>
                    <ul class="conLeftList2">
                        <li v-for="(info,index) in infoText" :key="index" :class="{liactive:isActive == info.title,defaultActive:default1}" @click="isShow(info.title)">
                            <div class="list2Img" :style="info.bgColor"><img :src="info.imgSrc" alt=""></div>
                            <p>{{info.title}}&nbsp;<!--(<span>{{info.number}}</span>)!--></p>
                        </li>
                    </ul>
                </el-aside>
                <el-main id="conRight">
                    <component :is="which_to_show" :orderId="orderId" :memberId="memberId" v-loading="isLoading" :dataInfo="dataInfo">
                    </component>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import OrderInfos from './OrderInfo.js';
    export default OrderInfos;
</script>
<style lang="less" scoped>
    @import "./OrderInfo.less";
</style>
<style lang="less">
    #order-info {
        #infoHeader {
            .item-header {
                display: flex;
                .el-form-item {
                    .el-form-item__label {
                        line-height: 25px;
                    }
                    .el-form-item__content {
                        line-height: 10px;
                        .el-input__inner {
                            padding: 0 0 0 15px;
                            height: 25px;
                            border: none;
                            border-bottom: 1px solid #dcdfe6;
                        }
                    }
                }
                .header-item1 {
                    .el-form-item__label {
                        width: 40px !important;
                        border: 1px solid #409EFF;
                        color: #409EFF;
                        text-align: center;
                        padding: 0 0;
                        border-bottom: 2px solid #409EFF; // box-shadow:40px 20px 2px 2px #f00 outset;
                    }
                    .el-form-item__content {
                        margin-left: 50px !important;
                    }
                }
                .header-item2 {
                    margin-left: 20px;
                    .el-input {
                        width: 80%;
                    }
                }
                .header-item3 {
                    .el-form-item__label {
                        width: 60px !important;
                    }
                    .el-form-item__content {
                        margin-left: 47px !important;
                    }
                    .el-input {
                        width: 80%;
                    }
                }
                .header-btn {
                    .infoLine1Right {
                        position: absolute;
                        left: 82%;
                        width: 200px;
                        .line1CloseBtn {
                            display: inline-block;
                            border-radius: 50%;
                            width: 38px;
                            height: 38px;
                            line-height: 38px;
                            color: #CF3B2C;
                            font-size: 20px;
                            background: #fff;
                            border: 1px solid #dcdedc !important;
                            text-align: center;
                            margin-left: 20px;
                            cursor: pointer;
                        }
                        .editInfo {
                            background: #27a1f2;
                            color: #fff;
                            cursor: pointer;
                            padding: 7px 25px;
                            border-radius: 20px;
                        }
                        .editInfo:hover {
                            background: #409EFf;
                        }
                        .line1CloseBtn:hover {
                            background: #27a1f2;
                            color: #fff;
                        }
                    }
                }
            }
            .item-body {
                display: flex;
                .el-form-item {
                    .el-form-item__label {
                        line-height: 25px;
                        text-align: left;
                        width: 100% !important;
                        color: #409EFF;
                    }
                    .el-form-item__content {
                        margin-left: 0 !important;
                        line-height: 10px;
                        .el-input__inner {
                            padding: 0 0;
                            border: none;
                            border-bottom: 1px solid #dcdfe6;
                        }
                    }
                }
            }
            .item-padding {
                .el-input {
                    width: 80% !important;
                }
                .el-input__inner {
                    padding: 0 0 0 5px;
                }
            }
        }
        .el-select-dropdown {
            li {
                text-align: center;
            }
        }
        .btns .el-input__inner {
            height: 25px !important;
        }
    }
</style>

